<!--<page-grid>-->
  <p style="padding: 1px;"></p>
  <div nz-row [nzGutter]="24">
    <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="6">
      <g2-card [title]="'历史借贷金额'" total="¥{{loanAmount}}" contentHeight="46px" [action]="action1" [footer]="footer1">
        <ng-template #action1>
          <nz-tooltip [nzTitle]="'指标说明'">
            <i nz-tooltip nz-icon type="info-circle"></i>
          </nz-tooltip>
        </ng-template>
        <g2-mini-area *ngIf="loanAmountData" color="#975FE4" height="46" [data]="loanAmountData"></g2-mini-area>
        <ng-template #footer1>
          <div class="d-flex justify-content-between text-truncate">
            <trend flag="{{loanUp}}">
              月同比
              <span class="pl-sm">{{loanMonth}}%</span>
            </trend>
          </div>
        </ng-template>
      </g2-card>
    </div>
    <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="6">
      <g2-card [title]="'贷款余额'" total="¥{{loanNalance}}" contentHeight="44px" [action]="action2" [footer]="footer2">
        <ng-template #action2>
          <nz-tooltip [nzTitle]="'指标说明'">
            <i nz-tooltip nz-icon type="info-circle"></i>
          </nz-tooltip>
        </ng-template>
          <trend flag="{{loanNalanceWeekUp}}">
            周同比
            <span class="pl-sm">{{loanNalanceWeek}}%</span>
          </trend>
          <trend flag="{{loanNalanceDataUp}}" style="display:block; margin-top:2px;">
            日同比
            <span class="pl-sm">{{loanNalanceData}}%</span>
          </trend>
        <ng-template #footer2>
          <div class="d-flex justify-content-between text-truncate">
            <trend flag="{{loanNalanceMonthUp}}">
              月同比
              <span class="pl-sm">{{loanNalanceMonth}}%</span>
            </trend>
          </div>
        </ng-template>
      </g2-card>
    </div>
    <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="6">
      <g2-card [title]="'损失金额'" total="¥{{loss}}" contentHeight="46px" [action]="action3" [footer]="footer3">
        <ng-template #action3>
          <nz-tooltip [nzTitle]="'指标说明'">
            <i nz-tooltip nz-icon type="info-circle"></i>
          </nz-tooltip>
        </ng-template>
        <g2-mini-bar *ngIf="lossData" height="46" [data]="lossData"></g2-mini-bar>
        <ng-template #footer3>
          <div class="d-flex justify-content-between text-truncate">
            <trend flag="{{lossMonthUp}}">
              月同比
              <span class="pl-sm">{{lossMonth}}%</span>
            </trend>
          </div>
        </ng-template>
      </g2-card>
    </div>
    <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="6">
      <g2-card [title]="'不良率'" total="{{defective}}%" contentHeight="46px" [action]="action4" [footer]="footer4">
        <ng-template #action4>
          <nz-tooltip [nzTitle]="'指标说明'">
            <i nz-tooltip nz-icon type="info-circle"></i>
          </nz-tooltip>
        </ng-template>
        <g2-mini-progress height="46" percent="0" strokeWidth="8" target="80" color="#13C2C2"></g2-mini-progress>
        <ng-template #footer4>
          <div class="d-flex justify-content-between text-truncate">
            <trend flag="{{defectiveMonthUp}}">
              月同比
              <span class="pl-sm">{{defectiveMonth}}%</span>
            </trend>
          </div>
        </ng-template>
      </g2-card>
    </div>
  </div>
  <nz-card [nzLoading]="loading" [nzBordered]="false" class="ant-card__body-nopadding sales-card">
    <nz-tabset [nzTabBarExtraContent]="extraTemplate" *ngIf="data.salesData" (nzSelectedIndexChange)="salesChange($event)">
      <nz-tab *ngFor="let tab of saleTabs" [nzTitle]="(tab.key)">
        <div nz-row>
          <div nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="16">
            <div class="bar">
              <g2-bar *ngIf="tab.show" height="295" style="width: 100%" [title]="(tab.key)" [data]="data.salesData"></g2-bar>
            </div>
          </div>
          <div nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8">
            <div class="rank">
              <h4 class="ranking-title">{{'各区域业务量排行榜'}}</h4>
              <ul class="rank-list">
                <li *ngFor="let i of rankingListData; let idx = index">
                  <span class="number" [ngClass]="{'active': idx < 3}">{{idx+1}}</span>
                  <span class="title">{{i.title}}</span>
                  <span class="value">{{i.total | number: '3.0'}}</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </nz-tab>
      <ng-template #extraTemplate>
        <div class="sales-extra-wrap">
          <div class="sales-extra">
            <a (click)="setDate('today')">今日</a>
            <a (click)="setDate('week')">本周</a>
            <a (click)="setDate('month')">本月</a>
            <a (click)="setDate('year')">全年</a>
          </div>
          <nz-range-picker [(ngModel)]="date_range" style="display:inline-block; width: 256px;"></nz-range-picker>
        </div>
      </ng-template>
    </nz-tabset>
  </nz-card>


  <!-- <nz-card [nzLoading]="loading" [nzBordered]="false" [nzBodyStyle]="{'padding': '0 0 32px'}" class="offline-card mt-lg">
    <nz-tabset *ngIf="offlineData" [(nzSelectedIndex)]="offlineIdx" (nzSelectedIndexChange)="offlineChange($event)">
      <nz-tab *ngFor="let tab of offlineData; let i = index;" [nzTitle]="nzTabHeading">
        <ng-template #nzTabHeading>
          <div nz-row [nzGutter]="8" style="width: 138px; margin: 8px 0;">
            <div nz-col [nzSpan]="12">
              <number-info [title]="tab.name" [subTitle]="'转化率'" gap="2" [total]="(tab.cvr * 100) + '%'" [theme]="i !== offlineIdx && 'light'"></number-info>
            </div>
            <div nz-col [nzSpan]="12" style="padding-top: 36px;">
              <g2-pie [color]="i !== offlineIdx && '#BDE4FF'" [inner]="0.55" [tooltip]="false" [padding]="[0, 0, 0, 0]" [percent]="tab.cvr * 100" [height]="64"></g2-pie>
            </div>
          </div>
        </ng-template>
      </nz-tab>
    </nz-tabset>
  </nz-card> -->
<!--</page-grid>-->
